<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import {ElNotification} from "element-plus";

interface NoticeItem {
  title: string
  content: string
  createDate: string
  readStatus: 0 | 1 // 0: 未读, 1: 已读
  sendPerson: string
}

export default defineComponent({
  name: 'notice',

  setup() {
    const data = reactive({
      noticeList: [
        {
          title: '系统维护通知',
          content: '本周六凌晨进行系统升级维护，请提前做好准备。',
          createDate: '2025-04-05 08:30',
          readStatus: 0,
          sendPerson: '运维团队'
        },
        {
          title: '假期安排公告',
          content: '五一劳动节放假安排已出，请查看详细日程。',
          createDate: '2025-04-01 14:22',
          readStatus: 1,
          sendPerson: '行政部'
        },
        {
          title: '新功能上线提醒',
          content: '消息中心现已支持分类筛选与批量标记已读。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '产品团队'
        },
        {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        },
        {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        },
        {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        }, {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        },
        {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        },
        {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        },
        {
          title: '坤坤下单通知',
          content: '坤坤即将下单。',
          createDate: '2025-03-28 10:15',
          readStatus: 0,
          sendPerson: '荔枝的ikun'
        }
      ] as NoticeItem[]
    })

    // 方法：标记为已读
    const markAsRead = (index: number) => {
      data.noticeList[index].readStatus = 1
    }

    // 方法：标记全部为已读
    const markAllAsRead = () => {
      data.noticeList.forEach(item => {
        item.readStatus = 1
      })
    }

    // 模拟数据加载（可选）
    onMounted(() => {
      ElNotification({
        title: '提示:',
        message: "点击可以确认已读",
        duration:1500
      })
    })

    return {
      ...toRefs(data),
      markAsRead,
      markAllAsRead
    }
  }
})
</script>

<template>
  <div class="notice-container" style="height: 100%; display: flex; flex-direction: column;">
    <!-- 页面标题 -->
    <el-card shadow="never" style="height: 100%; display: flex; flex-direction: column;">
      <template #header>
        <!-- 头部内容 -->
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="font-size: 18px; font-weight: bold;">消息通知</span>
          <el-button type="primary" size="small" @click="markAllAsRead">
            全部标记为已读
          </el-button>
        </div>
      </template>

      <!-- 关键：body 区域使用 flex: 1，让它撑满剩余空间 -->
      <div style="height: fit-content; overflow-y: auto; padding: 0 4px;">
        <el-empty v-if="noticeList.length === 0" description="暂无通知" />
        <el-list v-else>
          <!-- 列表项 -->
          <el-list-item
              v-for="(item, index) in noticeList"
              :key="index"
              :class="{ 'unread': item.readStatus === 0 }"
              @click="markAsRead(index)"
              style="padding: 16px 0; border-bottom: 1px solid #f0f0f0;"
          >
            <el-card
                :shadow="item.readStatus === 0 ? 'hover' : 'never'"
                style="width: 100%; border-left: 4px solid #409eff;"
                :style="item.readStatus === 0 ? { backgroundColor: '#f9faff' } : {}"
            >
              <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                <div style="flex: 1;">
                  <h3 style="margin: 0 0 8px 0; color: #303133;">{{ item.title }}</h3>
                  <p style="color: #606266; font-size: 14px; margin: 4px 0;">{{ item.content }}</p>
                  <div style="color: #999; font-size: 12px; margin-top: 8px;">
                    发送人：{{ item.sendPerson }} | 时间：{{ item.createDate }}
                  </div>
                </div>
                <div style="margin-left: 16px;">
                  <el-tag :type="item.readStatus === 1 ? 'success' : 'danger'" size="small">
                    {{ item.readStatus === 1 ? '已读' : '未读' }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </el-list-item>
        </el-list>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.unread:hover {
  background-color: #ecf5ff;
}
:deep .el-card__body {
  height: 100%;
  overflow-y: auto;
}
</style>